CSS @import qoidasini o'rganing: uning funksionalligi, yuklanish xususiyatlari va stil jadvallari bog'liqliklarini boshqarishga ta'sirini tushunib oling. Optimizatsiya uchun eng yaxshi amaliyotlar va link teglar kabi muqobil yondashuvlarni o'rganing.
CSS @import Qoidasi: Stil jadvallarini yuklash va bog'liqliklarni boshqarish
Veb-dasturlash dunyosida Kaskadli Stil Jadvallari (CSS) veb-kontentni samarali tarzda bezash va taqdim etish uchun asosiy vositadir. Veb-saytlar rivojlanib borgan sari, CSS murakkabligi ham ortadi, bu esa ko'pincha bir nechta stil jadvallaridan foydalanishni talab qiladi. CSS @import qoidasi tashqi stil jadvallarini bitta hujjatga kiritish mexanizmini taqdim etadi. Ushbu blog postida @import qoidasining nozikliklari, uning stil jadvallarini yuklashga ta'siri va bog'liqliklarni samarali boshqarish uchun eng yaxshi amaliyotlar chuqur o'rganiladi. Biz uning qanday ishlashini o'rganamiz, afzalliklari va kamchiliklarini muhokama qilamiz va uni muqobil yondashuvlar bilan taqqoslaymiz.
CSS @import Qoidasini Tushunish
@import qoidasi sizga tashqi stil jadvalini boshqa bir CSS fayli ichiga kiritish imkonini beradi. Sintaksis juda oddiy:
@import url("stylesheet.css");
yoki
@import "stylesheet.css";
Ikkalasi ham funksional jihatdan bir xil, ikkinchi usul URL argumentini yashirincha qabul qiladi. Brauzer @import bayonotiga duch kelganda, u ko'rsatilgan stil jadvalini yuklab oladi va uning qoidalarini hujjatga qo'llaydi. Bu qoida stil jadvalining boshida, boshqa har qanday CSS e'lonlaridan oldin joylashtirilishi kerak. Bunga har qanday CSS qoidalari kiradi. Import bayonotidan keyin paydo bo'lgan boshqa har qanday CSS qoidalari samarasiz bo'ladi.
Asosiy Foydalanish
Sizda asosiy stil jadvali (main.css) va tipografiya uchun stil jadvali (typography.css) mavjud bo'lgan oddiy stsenariyni ko'rib chiqaylik. Tipografiya uslublaringizni alohida boshqarish uchun typography.css faylini main.css ga import qilishingiz mumkin:
typography.css:
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
font-size: 2em;
}
main.css:
@import "typography.css";
/* Maket va dizayn uchun boshqa stillar */
.container {
width: 80%;
margin: 0 auto;
}
Ushbu yondashuv modullik va tartibni ta'minlaydi, ayniqsa loyihalar kengaygan sari toza va oson qo'llab-quvvatlanadigan kodga imkon beradi.
Yuklanish Xususiyatlari va Uning Ta'siri
@import qoidasining yuklanish xususiyatlari tushunish uchun muhim jihatdir. <link> tegidan (keyinroq muhokama qilinadi) farqli o'laroq, @import brauzer tomonidan dastlabki HTML tahlili tugagandan so'ng qayta ishlanadi. Bu, ayniqsa, @import yordamida bir nechta stil jadvallari import qilinganida, unumdorlikka salbiy ta'sir ko'rsatishi mumkin.
Ketma-ket Yuklanish
@import dan foydalanilganda, brauzer odatda stil jadvallarini ketma-ket yuklaydi. Bu shuni anglatadiki, brauzer avval dastlabki CSS faylini yuklashi va tahlil qilishi kerak. Keyin u @import bayonotiga duch keladi, bu esa uni import qilingan stil jadvalini yuklab olishga va tahlil qilishga undaydi. Faqat shundan keyingina u keyingi stil qoidasi yoki veb-sahifani renderlash bilan davom etadi. Bu parallel yuklash imkonini beruvchi HTML <link> tegidan farq qiladi.
@import ning ketma-ket tabiati sahifaning dastlabki yuklanish vaqtini sekinlashtirishi mumkin, bu ayniqsa sekin ulanishlarda sezilarli bo'ladi. Ushbu kechiktirilgan yuklanish brauzerning qo'shimcha HTTP so'rovlarini amalga oshirishi va brauzer tarkibni renderlashdan oldin so'rovning seriyalizatsiyasi bilan bog'liq bo'lishi mumkin.
Stilsiz Tarkibning Miltillashi (FOUC) uchun Potensial
CSS-ning @import orqali ketma-ket yuklanishi Stilsiz Tarkibning Miltillashiga (FOUC) olib kelishi mumkin. FOUC tashqi stil jadvallari yuklanib, qo'llanilishidan oldin brauzer dastlab HTML tarkibini brauzerning standart stillari yordamida render qilganda yuz beradi. Bu foydalanuvchilar uchun bezovta qiluvchi vizual tajriba yaratishi mumkin, chunki veb-sahifa kerakli stillar qo'llanilishidan oldin qisqa vaqt davomida stilsiz ko'rinishi mumkin. FOUC ayniqsa sekin ulanishlarda sezilarli ta'sir ko'rsatadi.
Sahifani Render qilishga Ta'siri
Brauzer sahifani renderlashdan oldin har bir import qilingan stil jadvalini yuklashi va tahlil qilishi kerakligi sababli, @import dan foydalanish sahifani renderlash vaqtiga bevosita ta'sir qilishi mumkin. Sizda qancha ko'p @import bayonotlari bo'lsa, brauzer shuncha ko'p HTTP so'rovlarini amalga oshirishi kerak, bu esa renderlash jarayonini sekinlashtirishi mumkin. Samarali CSS foydalanuvchi tajribasini optimallashtirish uchun juda muhimdir. Sekin yuklanish vaqtlari yomon foydalanuvchi tajribasiga va foydalanuvchilarni yo'qotishga olib keladi.
Bog'liqliklarni Boshqarish va Tashkil etish
@import CSS loyihalarida bog'liqliklarni boshqarish uchun foydali bo'lishi mumkin. Undan foydalanish katta stil jadvallarini kichikroq, oson boshqariladigan fayllarga bo'lish imkonini beradi. Bu kodingizni tartibli saqlashga yordam beradi, o'qilishi va qo'llab-quvvatlanishini yaxshilaydi. CSS-ni bo'lish jamoaviy hamkorlikni yaxshilaydi, ayniqsa bir nechta dasturchilar ishtirok etadigan loyihalar uchun.
CSS Fayllarini Tashkil etish
@import yordamida CSS fayllarini qanday tashkil qilish mumkin:
- Asosiy Stillar: Resetlar, tipografiya va umumiy standartlar kabi asosiy stillar uchun yadro stil jadvali (masalan,
base.css). - Komponent Stili: Alohida komponentlar uchun stil jadvallari (masalan,
button.css,header.css,footer.css). - Maket Stili: Sahifa maketi uchun stil jadvallari (masalan,
grid.css,sidebar.css). - Mavzu Stili: Mavzular yoki rang sxemalari uchun stil jadvallari (masalan,
dark-theme.css,light-theme.css).
Keyin siz ushbu stil jadvallarini yagona kirish nuqtasini yaratish uchun asosiy stil jadvaliga (masalan, styles.css) import qilishingiz mumkin.
styles.css:
@import "base.css";
@import "component/button.css";
@import "component/header.css";
@import "layout/grid.css";
@import "theme/dark-theme.css";
Ushbu modulli tuzilma loyihangiz kengaygan sari stillarni topish va yangilashni osonlashtiradi.
Bog'liqliklarni Boshqarish bo'yicha Eng Yaxshi Amaliyotlar
@import ning afzalliklaridan maksimal darajada foydalanish va uning unumdorlik kamchiliklarini minimallashtirish uchun quyidagi eng yaxshi amaliyotlarni ko'rib chiqing:
@importdan foydalanishni minimallashtiring: Undan tejamkorlik bilan foydalaning. Ideal holda,@importbayonotlari sonini minimal darajada saqlang. Bir nechta stil jadvallarini yuklash uchun<link>tegi kabi muqobil usullarni ko'rib chiqing, chunki u parallel yuklash imkonini beradi, bu esa unumdorlikni oshiradi.- Birlashtiring va Minifikatsiya qiling: Bir nechta CSS fayllarini bitta faylga birlashtiring va keyin uni minifikatsiya qiling. Minifikatsiya keraksiz belgilarni (masalan, bo'shliqlar va izohlar) olib tashlash orqali CSS fayllari hajmini kamaytiradi va shu bilan yuklanish tezligini oshiradi.
@importni yuqoriga joylashtiring:@importbayonotlari har doim CSS fayllaringizning boshida joylashtirilganligiga ishonch hosil qiling. Bu to'g'ri yuklanish tartibini ta'minlaydi va potentsial muammolarni oldini oladi.- Yig'ish jarayonidan foydalaning: Bog'liqliklarni boshqarish, birlashtirish va minifikatsiyani avtomatik ravishda amalga oshirish uchun yig'ish jarayonidan (masalan, Gulp yoki Webpack kabi vazifa bajaruvchilardan yoki Sass yoki Less kabi CSS preprotsessorlaridan foydalanish) foydalaning. Bu kodni siqishda ham yordam beradi.
- Unumdorlik uchun optimallashtiring: CSS fayllaringizni optimallashtirish orqali unumdorlikka ustunlik bering. Bunga samarali selektorlardan foydalanish, keraksiz murakkablikdan qochish va brauzer keshidan foydalanish kiradi.
@import ga muqobillar: <link> Tegi
<link> tegi CSS stil jadvallarini yuklashning muqobil usulini taqdim etadi, u @import ga nisbatan o'ziga xos afzallik va kamchiliklarga ega. Farqlarni tushunish stil jadvallarini yuklash haqida ongli qarorlar qabul qilish uchun juda muhimdir.
Parallel Yuklanish
@import dan farqli o'laroq, <link> tegi brauzerga stil jadvallarini parallel ravishda yuklash imkonini beradi. Brauzer HTML hujjatingizning <head> qismida bir nechta <link> tegiga duch kelganda, u ushbu stil jadvallarini bir vaqtda yuklab olishi mumkin. Bu, ayniqsa, veb-saytda ko'plab tashqi stil jadvallari yoki CSS fayllari mavjud bo'lganda, sahifaning dastlabki yuklanish vaqtini sezilarli darajada tezlashtiradi.
Misol:
<head>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style3.css">
</head>
Bu holda, brauzer style1.css, style2.css va style3.css fayllarini ketma-ket emas, balki bir vaqtning o'zida yuklab oladi.
HTML <head> qismida joylashuvi
<link> tegi HTML hujjatingizning <head> bo'limiga joylashtiriladi. Ushbu joylashuv brauzerning har qanday tarkibni renderlashdan oldin stil jadvallari haqida bilishini ta'minlaydi. Bu FOUC-ni oldini olish uchun muhimdir, chunki stillar tarkib ko'rsatilishidan oldin mavjud bo'ladi. Stil jadvallarining erta mavjudligi sahifani dizaynga muvofiq renderlashga yordam beradi, bu esa foydalanuvchining sahifa renderlanishini kutish vaqtini qisqartiradi.
<link> ning Afzalliklari
- Tezroq dastlabki yuklanish vaqti: Parallel yuklanish sahifaning ko'rsatilishi uchun ketadigan vaqtni qisqartiradi va foydalanuvchi tajribasini yaxshilaydi.
- FOUC kamayishi: Stil jadvallarini
<head>da yuklash FOUC ehtimolini kamaytiradi. - Brauzerlarni qo'llab-quvvatlashi:
<link>barcha brauzerlar tomonidan keng qo'llab-quvvatlanadi. - SEO afzalliklari: To'g'ridan-to'g'ri stillash bilan bog'liq bo'lmasa-da, tezroq yuklanish vaqtlari foydalanuvchi tajribasini yaxshilash va qidiruv tizimi natijalarida yuqoriroq o'rin egallash orqali SEO ga bilvosita foyda keltirishi mumkin.
<link> ning Kamchiliklari
- Kamroq to'g'ridan-to'g'ri bog'liqlikni boshqarish:
<link>ni to'g'ridan-to'g'ri HTML-da ishlatish@importkabi modullik va to'g'ridan-to'g'ri bog'liqlikni boshqarish afzalliklarini ta'minlamaydi, bu esa loyihalar kattalashganda CSS-ni tartibli saqlashni qiyinlashtirishi mumkin. - HTTP so'rovlarining ko'payishi ehtimoli: Agar sizda ko'plab
<link>teglari bo'lsa, brauzer ko'proq so'rovlar yuborishi kerak bo'ladi. Agar fayllarni kamroq so'rovlarga birlashtirish yoki kombinatsiya qilish choralarini ko'rmasangiz, bu unumdorlik afzalliklarining bir qismini yo'qqa chiqarishi mumkin.
<link> va @import o'rtasida tanlov
Eng yaxshi yondashuv loyihangizning o'ziga xos ehtiyojlariga bog'liq. Ushbu ko'rsatmalarni ko'rib chiqing:
- Production-da
<link>dan foydalaning: Aksariyat production muhitlarida yuqori unumdorligi tufayli odatda<link>afzal ko'riladi. - CSS-ni tashkil etish va preprotsessorlar uchun
@importdan foydalaning: Siz@importni yagona CSS fayli ichida kodni tashkil etish usuli sifatida yoki CSS preprotsessorida (Sass yoki Less kabi) ishlatishingiz mumkin. Bu sizning CSS-ingizni boshqarish va qo'llab-quvvatlashni osonlashtirishi mumkin. - Birlashtirish va minifikatsiyani ko'rib chiqing:
<link>yoki@importdan foydalanishingizdan qat'i nazar, har doim CSS fayllaringizni birlashtirish va minifikatsiya qilishni o'ylab ko'ring. Ushbu texnikalar unumdorlikni sezilarli darajada yaxshilaydi.
CSS Preprotsessorlari va @import
Sass, Less va Stylus kabi CSS preprotsessorlari CSS loyihalari uchun kengaytirilgan funksionallik va yaxshiroq tashkilotchilikni taklif etadi. Ular sizga o'zgaruvchilar, ichki joylashuv, miksinlar va eng muhimi, yanada rivojlangan import direktivalari kabi xususiyatlardan foydalanish imkonini beradi.
Kengaytirilgan Import Imkoniyatlari
CSS preprotsessorlari oddiy @import qoidasiga qaraganda ancha murakkab import mexanizmlarini taqdim etadi. Ular bog'liqliklarni hal qila oladi, nisbiy yo'llarni yanada samaraliroq boshqaradi va yig'ish jarayonlari bilan muammosiz integratsiyalashadi. Bu yaxshi unumdorlik va CSS-ni samarali modullashtirish imkoniyatini beradi.
Sass Misoli:
Sass sizga stil jadvallarini standart CSS @import qoidasiga o'xshash, lekin qo'shimcha imkoniyatlarga ega @import direktivasi yordamida import qilish imkonini beradi:
@import "_variables.scss";
@import "_mixins.scss";
@import "components/button";
Sass siz Sass fayllaringizni oddiy CSS-ga kompilyatsiya qilganingizda ushbu importlarni avtomatik ravishda boshqaradi. U bog'liqliklarni hal qiladi, fayllarni birlashtiradi va yagona CSS faylini chiqaradi.
Preprotsessorlarni Import bilan ishlatishning Foydalari
- Bog'liqliklarni boshqarish: Preprotsessorlar stillaringizni bir nechta fayllar bo'ylab tashkil etish va keyin ularni yagona CSS fayliga kompilyatsiya qilish imkonini berib, bog'liqliklarni boshqarishni soddalashtiradi.
- Kodning qayta ishlatilishi: Siz loyihangiz bo'ylab stillarni qayta ishlatishingiz mumkin.
- Modullik: Preprotsessorlar modulli kodni rag'batlantiradi, bu esa kattaroq loyihalarda yangilash, qo'llab-quvvatlash va hamkorlik qilishni osonlashtiradi.
- Unumdorlikni optimallashtirish: Preprotsessorlar HTTP so'rovlari sonini minimallashtirish va CSS fayllaringiz hajmini kamaytirish orqali CSS-ni optimallashtirishga yordam beradi.
Yig'ish Vositalari va Avtomatlashtirish
CSS preprotsessoridan foydalanganda, siz odatda Sass yoki Less fayllaringizni CSS-ga kompilyatsiya qilish jarayonini avtomatlashtirish uchun yig'ish vositasini (masalan, Webpack, Gulp) integratsiya qilasiz. Ushbu yig'ish vositalari birlashtirish, minifikatsiya va versiyalash kabi vazifalarni ham bajara oladi. Bu ish jarayonini soddalashtirishga va veb-saytingizning umumiy unumdorligini oshirishga yordam beradi.
Eng Yaxshi Amaliyotlar va Optimizatsiya Strategiyalari
@import yoki <link> dan foydalanishingizdan qat'i nazar, CSS yuklanishini optimallashtirish tez va sezgir foydalanuvchi tajribasini taqdim etish uchun muhimdir. Quyidagi strategiyalar yordam berishi mumkin:
Birlashtirish va Minifikatsiya
Birlashtirish bir nechta CSS fayllarini bitta faylga birlashtiradi, bu brauzer amalga oshirishi kerak bo'lgan HTTP so'rovlari sonini kamaytiradi. Minifikatsiya CSS faylidan keraksiz belgilarni (masalan, bo'shliqlar, izohlar) olib tashlaydi va uning hajmini kamaytiradi. Bu yuklanish vaqtining yaxshilanishiga va samaradorlikning oshishiga olib keladi.
Kritik CSS
Kritik CSS veb-sahifaning "above-the-fold" (birinchi ko'rinadigan) qismini renderlash uchun zarur bo'lgan CSS-ni ajratib olish va uni to'g'ridan-to'g'ri HTML-ning <head> qismiga joylashtirishni o'z ichiga oladi. Bu dastlabki tarkibning tez yuklanishini ta'minlaydi, qolgan CSS esa asinxron ravishda yuklanishi mumkin. Ushbu yondashuv birinchi sahifa yuklanishida foydalanuvchi tajribasini yaxshilash uchun juda muhimdir.
Asinxron Yuklanish
<link> tegi odatda CSS-ni sinxron ravishda yuklasa-da (yuklash tugamaguncha sahifani renderlashni bloklaydi), siz stil jadvallarini asinxron ravishda yuklash uchun preload atributidan foydalanishingiz mumkin. Bu CSS yuklanishining sahifangizni renderlashini bloklashini oldini olishga yordam beradi. Bu ayniqsa katta, kritik bo'lmagan CSS fayllaringiz bo'lsa muhimdir.
Misol:
<link rel="preload" href="style.css" as="style" onload="this.onload=null; this.rel='stylesheet'">
Ushbu texnika brauzerga veb-sahifaning renderlanishini bloklamasdan stil jadvalini yuklab olish imkonini beradi. Stil jadvali yuklangandan so'ng, brauzer stillarni qo'llaydi.
Keshlashtirish
CSS fayllarini foydalanuvchining qurilmasida mahalliy ravishda saqlash uchun brauzer keshidan foydalaning. Keshlashtirish veb-saytingizga keyingi tashriflarda zarur bo'lgan HTTP so'rovlari sonini kamaytiradi. Siz serveringizda tegishli HTTP sarlavhalari (masalan, Cache-Control, Expires) yordamida keshlashtirishni sozlashingiz mumkin. Uzoq kesh vaqtlaridan foydalanish takroriy tashrif buyuruvchilar uchun unumdorlikni oshirishi mumkin.
Kod Optimization
Keraksiz murakkablikdan qochib va samarali selektorlardan foydalanib, samarali CSS kodi yozing. Bu CSS fayllaringiz hajmini minimallashtirishga va renderlash unumdorligini oshirishga yordam beradi. Murakkab selektorlar yoki brauzerning qayta ishlashi uchun ko'proq vaqt talab qiladigan selektorlardan foydalanishni minimallashtiring.
Zamonaviy Brauzerlar uchun Mulohazalar
Zamonaviy brauzerlar doimiy ravishda rivojlanmoqda va ba'zilari CSS-ni qanday boshqarishlarini optimallashtirgan. Yangi eng yaxshi amaliyotlarni joriy etish va stil jadvallaringiz unumdorligini sinab ko'rish orqali rivojlanishingizni zamonaviy saqlang. Masalan, brauzerning <link rel="preload" as="style"> ni qo'llab-quvvatlashi veb-sayt unumdorligini optimallashtirishning asosiy usuli bo'lishi mumkin.
Haqiqiy Dunyo Misollari va Keyslar
CSS @import va tegishli eng yaxshi amaliyotlarning ta'sirini ko'rsatish uchun, keling, ba'zi real hayotiy stsenariylarni va ularning unumdorlikka ta'sirini ko'rib chiqaylik.
Elektron Tijorat Veb-sayti
Elektron tijorat veb-sayti turli komponentlar (mahsulotlar ro'yxati, xarid savatchalari, to'lov shakllari va hk.) uchun ko'plab CSS fayllaridan foydalanishi mumkin. Agar ushbu veb-sayt birlashtirish yoki minifikatsiyasiz @import dan keng foydalansa, u sekin yuklanish vaqtlariga duch kelishi mumkin, ayniqsa mobil qurilmalarda yoki sekin ulanishlarda. <link> teglariga o'tish, CSS fayllarini birlashtirish va natijani minifikatsiya qilish orqali veb-sayt o'z unumdorligini, foydalanuvchi tajribasini va konversiya stavkalarini sezilarli darajada yaxshilashi mumkin.
Kontentga Boy Blog
Ko'plab maqolalarga ega blog tarkibni formatlash uchun turli xil stillarga, shuningdek vidjetlar, izohlar va umumiy mavzu uchun stillarga ega bo'lishi mumkin. Stillarni boshqariladigan qismlarga bo'lish uchun @import dan foydalanish dasturlashni osonlashtirishi mumkin. Biroq, ehtiyotkorlik bilan optimallashtirmasdan, blogni har bir sahifa yuklanishida yuklash unumdorlikni pasaytirishi mumkin. Bu blogda maqola o'qiyotgan foydalanuvchilar uchun sekin renderlash vaqtiga olib kelishi mumkin, bu esa foydalanuvchilarni saqlab qolishga salbiy ta'sir ko'rsatishi mumkin. Unumdorlikni yaxshilash uchun CSS-ni birlashtirish va minifikatsiya qilish hamda keshlashtirishni qo'llash eng yaxshisidir.
Katta Korporativ Veb-sayt
Ko'p sahifalarga va murakkab dizaynga ega bo'lgan katta korporativ veb-sayt bir nechta stil jadvallariga ega bo'lishi mumkin, ularning har biri saytning turli bo'limlari uchun stillarni taqdim etadi. Sass kabi CSS preprotsessorini CSS fayllarini avtomatik ravishda birlashtiradigan va minifikatsiya qiladigan yig'ish jarayoni bilan birgalikda ishlatish samarali yondashuvdir. Ushbu usullardan foydalanish ham unumdorlikni, ham qo'llab-quvvatlanishni oshiradi. Yaxshi tuzilgan va optimallashtirilgan sayt qidiruv tizimi reytinglarini yaxshilaydi, bu esa ko'rinish va jalb etishning ortishiga olib keladi.
Xulosa: Asosli Qarorlar Qabul qilish
CSS @import qoidasi CSS-ni tuzish va boshqarish uchun foydali vositadir. Biroq, uning yuklanish xususiyatlari noto'g'ri ishlatilsa, unumdorlik muammolarini keltirib chiqarishi mumkin. @import va <link> tegi kabi muqobil yondashuvlar o'rtasidagi farqlarni tushunish va birlashtirish, minifikatsiya va preprotsessorlardan foydalanish kabi eng yaxshi amaliyotlarni integratsiya qilish, unumdor va qo'llab-quvvatlanadigan veb-sayt yaratish uchun juda muhimdir. Ushbu omillarni diqqat bilan ko'rib chiqib va CSS yuklash strategiyangizni optimallashtirib, siz butun dunyo bo'ylab auditoriyangiz uchun tezroq, silliqroq va qiziqarliroq foydalanuvchi tajribasini taqdim eta olasiz.
@import dan foydalanishni minimallashtirishni, kerakli joylarda <link> tegiga ustunlik berishni va CSS optimallashtirishini avtomatlashtirish uchun yig'ish vositalarini integratsiya qilishni unutmang. Veb-dasturlash rivojlanishda davom etar ekan, CSS yuklanishini boshqarish bo'yicha so'nggi tendentsiyalar va eng yaxshi amaliyotlardan xabardor bo'lib turish yuqori unumdorlikka ega veb-saytlar yaratish uchun muhimdir. CSS-dan samarali foydalanish muvaffaqiyatli veb-saytning asosiy tarkibiy qismidir.